<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function doAdd() {
                //创建li元素节点
                var li = document.createElement("li");

                //创建文本节点
                // var txt=document.createTextNode("li05");

                //将文本节点添加到元素节点中去
                // 父元素节点.appendChild(子元素节点);
                // li.appendChild(txt);

                li.innerHTML = "我是li05";

                //找到li元素的父节点
                var ul = document.querySelector("ul");

                //将li元素添加到ul中来
                ul.appendChild(li);
            }

            function doAdd2() {

                //获取父节点
                var ul = document.querySelector("ul");//DOM对象

                //获取所有li节点的DOM对象的集合
                var lis = document.querySelectorAll("li");//集合

                //新创建的节点
                var p = document.createElement("p");
                p.innerHTML = "我是p标签";

                // node.insertBefore(newNode,refNode)
                // 父节点.insertBefore(新创建的节点,指定已经存在的节点)
                // 在指定节点前面添加新创建的节点
                ul.insertBefore(p, lis[1]);


            }

            function doReplace() {

                //获取父节点
                var ul = document.querySelector("ul");//DOM对象

                //获取所有li节点的DOM对象的集合
                var lis = document.querySelectorAll("li");//集合

                // node.replaceChild(newNode,refNode)
                // 父节点.replaceChild(新创建的节点,指定已经存在的节点);
                // 指定使用新创建的节点替换已经存在的节点
                var span = document.createElement("span");
                span.innerHTML = "我是一个span标签";
                ul.replaceChild(span, lis[2]);
            }

            function doRemove() {
                // node.remove()
                // 节点的DOM对象.remove()
                //获取所有li节点的DOM对象的集合
                // var lis = document.querySelectorAll("li");//集合
                // lis[3].remove();

                // node.removeChild(childNode)
                // 父节点.removeChild(子节点);
                //获取父节点
                var ul = document.querySelector("ul");//DOM对象
                ul.removeChild(document.querySelector("li"));//删除ul中的第一个li
            }
        </script>
    </head>
    <body>
        <input type="button" value="添加li" onclick="doAdd()">
        <input type="button" value="添加p" onclick="doAdd2()">
        <input type="button" value="替换li03" onclick="doReplace()">
        <input type="button" value="删除" onclick="doRemove()">
        <ul>
            <li>li01</li>
            <li>li02</li>
            <li>li03</li>
            <li>li04</li>
        </ul>
    </body>
</html>